 <template>
    <div id="index">
        <div id="login-right">
            <div>
                <div class="left-bg">
                    <img src="../../../public/image/mini.png" height="478" width="456"/>
                </div>
            </div>
        </div>
        <div id="login-left">
            <div>
                <div class="login">
                    <div>
                        <div>
                            <img src="../../../public/image/logo.jpg" height="90" width="300"/>
                        </div>
                        <div style="margin-top: 30px">
                            <span class="sp"><img src="../../../public/image/xuanze.png" height="28" width="28"/></span>
                            <el-select v-model="clerk.roleId" clearable placeholder="请选择登陆身份">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div>
                            <span class="sp"><img src="../../../public/image/user.png" height="22" width="22"/></span>
                            <el-input class="inpt" v-model="clerk.clerkAccountNumber" placeholder="用户名"></el-input>
                        </div>
                        <div>
                            <span class="sp"><img src="../../../public/image/password.png" height="22" width="22"/></span>
                            <el-input class="inpt" placeholder="密码" v-model="clerk.clerkPassword" show-password></el-input>
                        </div>
                        <div id="register-forget">
                            <span id="register"><router-link @click="register" class="links" to="/register">注册</router-link></span>
                            <span id="forget"><router-link @click="forgetThePwd" class="links" to="#">忘记密码?</router-link></span>
                        </div>
                        <button class="login-btn" type="button" @click="login">登录</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                isRegister: true,
                isForget: false,
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                clerk:{
                    roleId:"",
                    clerkAccountNumber:"",
                    clerkPassword:""
                },
                journal:{
                    clId:null,
                    buId:null,

                },
                c:{

                }
            }
        },
        mounted() {
            this.roleLoad()
        },
        methods:{
            login(){
                //登录功能
                this.$axios.post("/administration/clerk/login",this.clerk).then(result=>{
                    if (result.data.manage == "true"){
                        let tokens = result.data.token.split(".");
                        let palyloads = Buffer.from(tokens[1],"base64").toString();
                        let js = JSON.parse(palyloads)
                        //暂时存入登陆人信息
                        sessionStorage.setItem("clerk",JSON.stringify(result.data.data));
                        //存入员工id
                        sessionStorage.setItem("cid",JSON.stringify(js.cid));
                        sessionStorage.setItem("token",JSON.stringify(result.data.token));
                        sessionStorage.setItem("bid",JSON.stringify(js.bid));
                        this.journal.clId=JSON.stringify(js.cid)
                        this.journal.buId=JSON.stringify(js.bid)
                        this.save();
                        this.$router.push('/index/chart')
                    }else{
                        alert(result.data.manage);
                        return false;
                    }
                })


            },

            //增加登录日志
            save(){
                this.$axios.post("/administration/journal/saveRiZhi",this.journal).then(result2=> {
                    this.c=result2.data;
                    this.$router.push("/index/shop");

                })
            },
            register(){

            },
            forgetThePwd(){

            }
        }


    }
</script>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .login-btn:hover {
        background: rgb(107, 154, 247);
    }
    .login-btn {
        margin-left: 10px;
        margin-top: 30px;
        width: 100%;
        height: 52px;
        outline-style: none;
        border: none;
        background: #87ADF8;
        font-size: 15px;
        color: #fff;
        border-radius: 4px;
    }
    .sp{
        margin-right: 20px;
    }
    #register-forget{
        margin-top: 20px;
    }
    #forget{
        float: right;
    }
    #register{
        padding-left: 40px;
    }
    .links:hover{
        color: #6c9af7;
    }
    .links{
        font-size: 12px;
        font-weight: bolder;
        text-decoration: none;
        color: #999999;
    }
    .inpt{
        margin-top: 20px;
        height: 40px;
        width: 260px;
        font-size: 14px;
        color: #dddfe4;
    }
    .login{
        float: left;
        margin-top:  180px;
        margin-left: 100px;
    }
    #index{
        width: 100%;
        height: 59em;
    }
    #login-right{
        display: inline-block;
        width: 57%;
        height: 59em;
        background-color: #87ADF8;
    }
    #login-left{
        display: inline-block;
        width: 42.5%;
        height: 59em;
    }
    .left-bg{
        float: left;
        margin-top: 250px;
        margin-left: 300px;
    }

</style>